﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>停车场列表</title>
    <script src="../js/json2.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/uikit.js"></script>
    <link href="../css/uikit.gradient.css" rel="stylesheet" />
    <link href="../css/mySelft.css" rel="stylesheet" />
    <link type="text/css" href="../css/sous.css" rel="stylesheet" />
    <style type="text/css">
        a {
            color:#6FAA18;
        }
        .st_title {
            font-size: 16px;
            font-weight: bold;
            color: #6FAA18;
            margin: 5px;
        }

        .st_meta {
            font-weight: bold;
            float: left;
            padding-left: 5px;
        }

        .st_content {
            font-size: 13px;
            line-height: 26px;
            color: #373e53;
        }

        a:hover {
            color: #FF6600;
            text-decoration: underline;
        }

        .ui-refresh-wrapper {
            padding: 14px 3px;
        }

        .ui-refresh {
            height: 36px;
            line-height: 36px;
            background-color: #eef0f2;
            text-align: center;
            border: 1px solid #d2d9e0;
        }

        
    </style>
    
</head>
<body>
    <div class="container -shadow-card index-widget-searchbox styleguide -lighter">
        <div class="input-group ">
            <div class="input-text -brand">
                <div class="ui-suggestion-mask">
                    <input name="wd" type="text" class="se-input-poi" id="se-input-poi" placeholder="根据关键字搜索周边停车场" autocomplete="off">
                </div>
            </div>
            <button type="submit" class="btn -brand" id="se-btn" style="width:60px" onclick="getListByArea();">搜索</button>
        </div>
    </div>
    <div id="div_Json">
    </div>
    <div class="ui-refresh-wrapper" id="loadMore"><div class="ui-refresh">点击加载更多</div></div>
    <input type="hidden" id="currentPage" value="1" />
    <input type="hidden" id="currentAreaid" value="0101" />
    <input type="hidden" id="hiTotal" value="0" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".ui-refresh").html("加载中，请稍候...");
            getListByArea();

            $(".ui-refresh-wrapper").click(function () {
                $(".ui-refresh").html("加载中，请稍候...");
                var value = $("#currentPage").val();
                var currenPage = parseInt(value) + 1;
                var total = $("#hiTotal").val();
                //var currentAreaid = $("#currentAreaid").val();
                if (currenPage < total / 20) {
                    loadDae(currenPage, 20);
                    $("#currentPage").val(currenPage)
                } else {
                    $("#loadMore").hide();
                }
            });
        });

        function loadDae(currentPage, pageSize) {
            var _keyWords = $("#se-input-poi").val();

            var strurl = "http://yuntuapi.amap.com/datasearch/local?tableid=53e8b75ce4b08f92c0ffa6f2&city=北京市&keywords=" + _keyWords + "&key=1c69b4a7bc3ff8773bcb6fa31605bb1c&limit=" + pageSize + "&page=" + currentPage;
            var _location = getQueryString("_location");

            if (_location && !_keyWords) {
                var lon0 = _location.split(',')[1];
                var lat0 = _location.split(',')[0];
                strurl = "http://yuntuapi.amap.com/datasearch/around?tableid=53e8b75ce4b08f92c0ffa6f2&center=" + lat0 + "," + lon0 + "&&limit=" + pageSize + "&page=" + currentPage + "&key=1c69b4a7bc3ff8773bcb6fa31605bb1c"
            }
            $.ajax({
                type: "GET",
                url: strurl,
                dataType: "jsonp",//返回json格式的数据
                complete: function () {
                    var total = $("#hiTotal").val();
                    var currenPage = $("#currentPage").val();;
                    if (currenPage < total / 20) {
                        $("#loadMore").show();
                    } else {
                        $("#loadMore").hide();
                    }
                    $(".ui-refresh").html("点击加载更多");
                },//AJAX请求完成时隐藏loading提示
                success: function (data) {
                    if (data) {
                        $("#hiTotal").val(data.count);
                        
                    //    $("#loadMore").hide();
                    //} else {
                        $.each(data.datas, function (i, n) {
                            //if (n.Status == 2) {
                                var lon = n._location.split(',')[0];
                                var lat = n._location.split(',')[1];
                                var mapUrl = "http://mo.amap.com/?q=" + lat + "," + lon + "&name=" + n._name + "&dev=0";
                                var article = $("<article class=\"uk-comment\">");
                                var header = $("<header class=\"uk-comment-header\">");
                                var divtitle = $('<div class="st_title"><a href="' + mapUrl + '">' + n._name + '<span style="font-weight:lighter;font-size:12px;margin-left:6px;">停车位：' + n.count + '</span></a></div>');
                                var divCost = $('<div class="st_meta">价格：</div>');
                                var divCost2 = $('<div>' + n.cost + '<span style="font-weight:lighter;font-size:12px;margin-left:6px;">营业时间：' + n.openingTime + '</span></div>');
                                var divAdress = $('<div class="st_meta">地址：</div>');
                                var divAdress2 = $('<div>' + n._address + '</div>');
                                header.append(divtitle).append(divCost).append(divCost2).append(divAdress).append(divAdress2);
                                article.append(header);
                                $('#div_Json').append(article);
                            //}
                        });
                    }
                }
            });
        }

        function getListByArea() {
            //var areaid = getQueryString("areaid");
            $('#div_Json').html("");
            $("#currentPage").val(1);
            //$("#currentAreaid").val(areaid);
            loadDae(1, 20);
        }

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    </script>
</body>
</html>
